<template>
  <div class="about_page">
    <!-- banner 开始 -->
    <div class="banner">
      <img src="@/assets/images/about/banner.png" class="img" alt="关于哩哩" />
      <div class="w1200 inner">
        <!-- 面包屑 开始 -->
        <div class="breadcrumb">
          <el-breadcrumb class="el_breadcrumb" separator-class="el-icon-arrow-right">
            <el-breadcrumb-item
              ><nuxt-link to="/home">首页</nuxt-link></el-breadcrumb-item
            >
            <el-breadcrumb-item>关于我们</el-breadcrumb-item>
          </el-breadcrumb>

          <div class="title">
            <h2 class="h2">关于我们</h2>
            <h3 class="h3">ABOUT US</h3>
          </div>
        </div>
        <!-- 面包屑 end -->
      </div>
    </div>
    <!-- banner end -->

    <!-- 公司简介 开始 -->
    <div class="company_profile w1200">
      <h4 class="h4">公司简介</h4>

      <div class="info_box">
        <div class="info">
          <p>
            哩哩口腔是一家互联网口腔健康平台，总部位于中国深圳，核心团队来自于腾讯、百度、3M等公司，公司团队在线上运营和口腔医疗行业深耕多年，洞察行业革新和前沿技术，通过整合口腔专家、口腔医院、供应链等资源，为患者提供更优质、更优惠、更透明的口腔健康服务，提升患者就诊体验！
          </p>
        </div>
        <div class="illustration">
          <img
            src="@/assets/images/about/illustration.png"
            class="img"
            alt=""
          />
        </div>
      </div>
    </div>
    <!-- 公司简介 end -->

    <!-- 一站式无忧陪护就诊 开始 -->
    <div class="pane_wrap">
      <div class="w1200 pane_box">
        <h4 class="h4">一站式无忧陪护就诊</h4>
        <div class="sub_desc">
          专业便捷的第三方互联网口腔健康咨询服务平台，践行普惠医疗，坚守高准入门槛，以患者数量求质量和折扣，为口腔患者治疗提供一站式线上无忧陪护就诊，哩哩成百上千的专业口腔助理医生，一起以医者仁心的理念，让患者省时省钱省心的原则，坚定守护中国亿万口腔患者与家庭的健康福祉！
        </div>
        <div class="img_box">
          <img src="@/assets/images/about/img_01.png" class="img" alt="" />
        </div>
      </div>
    </div>
    <!-- 一站式无忧陪护就诊 end -->

    <!-- 发展历程 开始 -->
    <div class="carousel_wrapper">
      <h2 class="h2">发展历程</h2>
      <div class="w1200 carousel_inner">
        <el-carousel
          ref="elCarousel"
          arrow="never"
          interval="5000"
          indicator-position="none"
          height="330px"
        >
          <el-carousel-item
            v-for="(item, index) in historyList"
            :key="`carousel_${index}`"
          >
            <div class="timeline">
              <div
                class="cell"
                :class="item.year == sub ? 'cell_active' : ''"
                v-for="(sub, idx) in yearList"
                :key="`year_${idx}`"
              >
                {{ sub }}
              </div>
            </div>
            <div class="desc_box">
              <span class="bottom_text">{{ item.year }}</span>
              <div class="desc">
                <p>{{ item.desc }}</p>
                <p>{{ item.sub }}</p>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
        <div class="left_arrow" @click="pervImage">
          <img src="@/assets/images/about/arrow_left.png" alt="" />
        </div>
        <div class="right_arrow" @click="nextImage">
          <img src="@/assets/images/about/arrow_right.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 发展历程 end -->

    <!-- 使命 开始 -->
    <div class="mission_box">
      <div class="w1200 inner">
        <h2 class="h2">使命愿景</h2>
        <div class="box_list">
          <div class="box">
            <div class="avatar">
              <img src="@/assets/images/about/icon_01.png" class="img" alt="" />
            </div>
            <span class="h3">使命</span>
            <span class="h4">让口腔行业更美好</span>
          </div>
          <div class="box">
            <div class="avatar">
              <img src="@/assets/images/about/icon_02.png" class="img" alt="" />
            </div>
            <span class="h3">愿景</span>
            <span class="h4"
              >打造百亿市值互联网口腔平台服务平台，帮助亿万人解决口腔健康问题！</span
            >
          </div>
          <div class="box">
            <div class="avatar">
              <img src="@/assets/images/about/icon_03.png" class="img" alt="" />
            </div>
            <span class="h3">价值观</span>
            <span class="h4">客户第一、相互成就正直乐观、拥抱变化</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 使命 end -->

    <!-- 联系我们 开始 -->
    <div class="contact_box w1200">
      <h2 class="h2">联系我们</h2>
      <div class="address">
        <div class="map" id="map"></div>
        <div class="info">
          <p>联系地址：深圳市宝安区中央大道C座3楼</p>
          <p>联系电话：0755-23728316</p>
          <p>商务合作：bd@lilikq.com</p>
          <p>
            机构合作：<button class="btn" @click="goApply">填写信息</button>
          </p>
        </div>
      </div>
    </div>
    <!-- 联系我们 end -->
  </div>
</template>
<script>
var AMapLoader = null;
if (process.browser) {
  AMapLoader = require("@amap/amap-jsapi-loader");
}
import { MAP_KEYS } from "@/utils/constants";
import { broadcast } from "@/utils/utils";
import { Carousel, CarouselItem } from "element-ui";
export default {
  components: {
    [Carousel.name]: Carousel,
    [CarouselItem.name]: CarouselItem,
  },
  data() {
    return {
      historyList: [
        { year: "2019", desc: "2019.07.30  哩哩口腔成立；" },
        { year: "2020", desc: "2020.01.05  哩哩口腔平台上线；" },
        { year: "2021", desc: "2021.05.30  覆盖15个城市，300家口腔机构；" },
        {
          year: "2022",
          desc: "2022.06.30  累计服务患者突破20万；",
          sub: "2022.12.28  平台2.0焕新上线",
        },
      ],
      yearList: [2019, 2020, 2021, 2022],
    };
  },
  mounted() {
    console.log(AMapLoader);
    this.initMap();
  },
  methods: {
    // 初始化map
    async initMap() {
      let AMap = await AMapLoader.load({
        key: MAP_KEYS, // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JS API 的版本，缺省时默认为 1.4.15
        plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      });
      var lng = 113.86;
      var lat = 22.57;
      var center = new AMap.LngLat(lng, lat);
      // 创建地图实例
      var map = new AMap.Map("map", {
        zoom: 18,
        center: center,
        resizeEnable: true,
        zoomEnable: true,
        lang: "en",
      });
      var marker = new AMap.Marker({
        position: new AMap.LngLat(lng, lat),
        icon: require("../../assets/images/about/location.png"),
        offset: new AMap.Pixel(0, 0),
      });
      map.add(marker);
    },

    // 填写申请信息
    goApply() {
      broadcast("about.institutional.cooperation");
    },

    // 上一页
    pervImage() {
      this.$refs.elCarousel.prev();
    },
    // 下一页
    nextImage() {
      this.$refs.elCarousel.next();
    },
  },
};
</script>
<style lang="less" scoped>
@import "/assets/styles/index/about.less";
</style>